<template>
    <div class="line">
      <v-chart class="chart" :option="past7days" autoresize />
      <v-chart class="chart" :option="past24hours" autoresize />
    </div>
</template>

<script setup>
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'

import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts';
import { computed } from 'vue';

import { useStore } from 'vuex';

const store = useStore();


use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
])



const past24hours = computed(() => ({
  title: {
    text: '近24小时'
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['页面访问', '添加line']
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: store.state.Past24hoursData.hour
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '添加line',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      label: {
        show: true,
        position: 'top'
      },
      emphasis: {
        focus: 'series'
      },
      data: store.state.Past24hoursData.line
    },
    {
      name: '页面访问',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: store.state.Past24hoursData.page
    }
  ]
}))


const past7days = computed(() => ({
  title: {
    text: '近7日'
  },
  color: [
    '#ff6e76',
    '#58d9f9',
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['页面访问', '添加line']
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: store.state.Past7DaysData.date
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '添加line',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      label: {
        show: true,
        position: 'top'
      },
      emphasis: {
        focus: 'series'
      },
      data: store.state.Past7DaysData.line
    },
    {
      name: '页面访问',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: store.state.Past7DaysData.page
    }
  ]
}))

</script>

<style scoped lang="less">
  .line{
    height: 100%;
    display: flex;
    margin-right: 1rem;

    .chart{
      flex-grow: 1;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #e2e8f0;
    }

    &>:nth-child(1){
      margin-right: 1rem;
    }
  }
</style>